<template>
  <div class="app-container flex-column">
    <div class="flex-bd">
      <CalendarList :serchParams="serchParams" :options="calendarOptions">
        <template #dateCell="{data}">
          <template v-for="item in calendarOptions.config.data">
            <template v-if="data.day === item.yearMonthDate">
              <el-tooltip effect="dark" content="编辑" placement="top">
                <i class="el-icon-edit" @click="viewList(item.id)"></i>
              </el-tooltip>
              <div class="mt10" align="center">
                <dict-tag
                  :options="dict.type.calendar_work_status"
                  :value="item.workStatus"
                />
              </div>
            </template>
          </template>
        </template>
      </CalendarList>
    </div>
    <DialogList :options="formDialog">
      <FormList ref="formListDialog" :formParams="formParams" :options="formOptions" :visible="formDialog.visible"></FormList>
      <template #footer>
        <el-button size="small" @click="formDialog.visible = false">取消</el-button>
        <el-button size="small" type="primary" @click="onSubmit">确定</el-button>
      </template>
    </DialogList>
    <DialogList :options="fileDialog">
      <UploadList ref="uploadList" :options="fileDialog" :visible="fileDialog.visible" :down="calendarOptions.down"></UploadList>
      <template #footer>
        <el-button size="small" @click="fileDialog.visible = false">取消</el-button>
        <el-button size="small" type="primary" @click="onFileSubmit">确定</el-button>
      </template>
    </DialogList>
  </div>
</template>

<script>
import request from '@/utils/request'
import dayjs from 'dayjs'
import { objStr } from "@/utils/ruoyi"
import CalendarList from '@/components/Common/CalendarList'
import FormList from '@/components/Common/FormList'
import DialogList from '@/components/Common/DialogList'
import UploadList from '@/components/Common/UploadList'
export default {
  name: "CalendarDemo",
  components: {
    CalendarList,
    FormList,
    DialogList,
    UploadList
  },
  data() {
    return {
      serchParams: {
        yearMonth: dayjs().format('YYYY-MM')
      },
      calendarOptions: {
        loading: false,
        list: {
          url: '/data/sku/list'
        },
        import: {
          url: '/data/sku/import',
          auth: ['data:sku:import'],
          name: '',
          click:() => {
            this.fileDialog.visible = true
          }
        },
        down:{
          url: '/data/sku/importTemplate',
          auth: ['data:sku:importTemplate'],
          name: '',
          click:() => {
            this.download(this.calendarOptions.down.url, {}, `xxx上传模板.xlsx`)
          }
        },
        export: {
          url: '/data/sku/export',
          auth: ['data:sku:export'],
          name: '',
          click:() => {
            this.download(this.calendarOptions.export.url, objStr(this.serchParams), `xxx${new Date().getTime()}.xlsx`)
          }
        },
        view: {
          url: '/data/sku'
        },
        edit: {
          url: '/data/sku',
          auth: ['data:sku:edit'],
        },
        config: {
          data: []
        }
      },
      formDialog: {
        title: '新增',
        visible: false,
      },
      formParams: {
        id: null,
        status: ''
      },
      formOptions: {
        inline: false,
        labelWidth: '7em',
        isSubmit: false,
        columns: [
          {
            type: 'select',
            prop: 'status',
            label: '状态：',
            options: [
              {
                label: '工作',
                value: 1
              },
              {
                label: '休息',
                value: 0
              }
            ],
            rules: [
              { required: true, message: '请选择状态', trigger: 'change' }
            ]
          }
        ]
      },
      fileDialog: {
        title: '文件上传',
        visible: false,
        ['http-request']:(res) => {
          this.onUploadFile(res)
        } 
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList(){
      this.calendarOptions.loading = true
      setTimeout(() => {
        this.calendarOptions.loading = false
      }, 2000)
    },
    async viewList(id) {
      this.formDialog.title = '编辑'
      this.formDialog.visible = true
      let { data } = await request({
        url: this.calendarOptions.view.url + '/' + id,
        method: 'get'
      })
      for (let key in this.formParams) {
        this.formParams[key] = data[key]
      }
    },
    async editList(obj) {
      await request({
        url: this.calendarOptions.edit.url,
        method: 'put',
        data: obj ? obj : this.formParams
      })
      this.$modal.msgSuccess("编辑成功")
      this.formDialog.visible = false
      this.getList()
    },
    async onSubmit() {
      let isCheck = this.$refs['formListDialog'].onValidate()
      if (isCheck) {
        if (this.formParams.id) {
          this.editList()
        }
      }
    },
    async onFileSubmit(){
      this.$refs['uploadList'].onSubmitFile();
    },
    async onUploadFile(res){
      const formData = new FormData()
      formData.append('file', res.file)
      await request({
        url: this.calendarOptions.import.url, 
        method: 'post', 
        data: formData
      })
      this.fileDialog.visible = false
      this.$modal.msgSuccess("导入成功")
      this.getList('serch')
    }
  }
};
</script>

<style scoped lang="scss">

</style>

